<template>
  <hry-header title="个人资料" :showBackBtn="true">
    <div slot="content" class="home form-wrapper">
      <md-field>
        <md-cell-item title="头像" no-border>
          <span slot="right">
            <a-avatar
              class="avatar"
              v-if="!detailInfo.head_thumb"
              :size="32"
              icon="user"
            />
            <img
              v-else
              :src="formatImg(detailInfo.head_thumb)"
              class="userHeadPortrait"
              alt=""
              :onerror="errorImg"
            />
          </span>
          <md-image-reader @complete="onReaderComplete" @error="onReaderError">
          </md-image-reader>
        </md-cell-item>
        <md-cell-item
          title="账户名"
          :addon="detailInfo.mobile_show"
          no-border
        />
      </md-field>
      <div class="common-style"></div>
      <md-field>
        <md-cell-item
          @click="goValidate"
          title="实名"
          :addon="detailInfo.is_check === 1 ? '已认证' : '未认证'"
          :arrow="detailInfo.is_check === 1 ? false : true"
        />
        <md-cell-item title="性别" :addon="detailInfo.sex" />
        <md-cell-item
          title="类型"
          :addon="detailInfo.member_type"
          @click="$commonJs.goPage('questionnaire')"
          arrow
        />
        <a-button type="primary" block @click="logout">退出登录</a-button>
      </md-field>
    </div>
  </hry-header>
</template>

<script>
import "@/assets/fonticon/iconfont.css";
import { Field, CellItem, Icon, ImageReader, Tag, Toast } from "mand-mobile";
import { Avatar } from "ant-design-vue";
export default {
  name: "index",
  components: {
    [Field.name]: Field,
    [CellItem.name]: CellItem,
    [Avatar.name]: Avatar,
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      detailInfo: {
        head_thumb: ""
      },
      errorImg: 'this.src="' + require("@/assets/img/user.png") + '"'
    };
  },
  methods: {
    formatImg(url) {
      if (url.indexOf("uploads/headimg") !== -1) {
        return this.$api.imgProjectUrl + url;
      } else {
        return this.$api.imgProjectUrl + "/uploads/headimg/" + url;
      }
    },
    getData() {
      this.$ajax
        .post(this.$api.getPerson)
        .then(res => {
          this.detailInfo = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    logout() {
      this.$commonJs.logout("home");
    },
    goValidate() {
      if (this.detailInfo.is_check === 1) {
        return false;
      } else {
        this.$router.push({ name: "personAuthentication" });
      }
    },
    onReaderComplete(name, { file }) {
      Toast.hide();
      let formData = new FormData();
      formData.append("imgFile", file, file.name);
	  console.log(formData)
      this.$ajax.upload(this.$api.logoUpload, formData).then(res => {
        this.detailInfo.head_thumb = res.data.logo;
        this.$message.success("上传成功");
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.form-wrapper {
  .link {
    font-size: 25px;
  }
  .ant-btn {
    margin-top: 85px;
    height: 75px;
    font-size: 30px;
  }
  .userHeadPortrait {
    width: 98px;
    height: 98px;
    border-radius: 50%;
  }
}
</style>
